<template>
<view :style="'display:' + ( showPage ? 'block' : 'none' ) + ';'">
  <view class="Membership">
    <view class="Mcard" @tap="seeCardQrcode">
      <view class="dl" :style="'background: url(' + card_info.card_bg + ') center center / 100% 100% no-repeat; height: 400rpx; padding: 0rpx; position: relative;'">
        <view class="clr Mcard_top" style="top:37rpx; position: absolute; width: 100%;">
          <view class="fl" style="margin-left:37rpx;">
            <image :src="userInfo.avatar"></image>
            <text>{{ userInfo.nickname }}</text>
          </view>
          <view class="fr" style="margin-right:50rpx;">
            <image src="https://hf.pigcms.com/static/wxapp/ewmt_07.jpg"></image>
          </view>
        </view>
        <view class="clr Mcard_end" style="bottom:45rpx; position: absolute; width: 100%;">
          <view class="fl" :style="'color:' + card_info.numbercolor + ';margin-left:37rpx;font-size:40rpx;'">{{ card_info.show_card_code }}</view>
          <div class="fr" style="margin-right:36rpx;font-size:28rpx;" v-if="card_info.discount != 0">{{ card_info.discount }}折</div>
        </view>
      </view>
    </view>
    <view class="code_bg"><view id="code"></view></view>
    <view class="Mlist">
      <view class="li" @tap="goUrl" data-url="c=My_card&a=merchant_prepay">
        <view class="h2"><text></text>余额</view>
        <view>{{ card_info.real_card_money }}元</view>
      </view>
      <view class="li" @tap="goUrl" data-url="c=My_card&a=merchant_point">
        <view class="h2"><text></text>积分</view>
        <view>{{ card_info.card_score }}分</view>
      </view>
      <view class="li" @tap="goUrl" data-url="c=My_card&a=merchant_coupon">
        <view class="h2"><text></text>优惠券</view>
        <view>{{ card_info.coupon_num }}张</view>
      </view>
    </view>
  </view>
  <view class="Membership">
    <view class="Mlist_end">
      <view class="ul clearfix">
        <view class="li" @tap="goUrl" data-url="c=My_card&a=merchant_right">
          <image src="https://hf.pigcms.com/static/wxapp/hyk5.png"></image>
          <view>会员特权</view>  
        </view>
        <view class="li" @tap="goUrl" data-url="c=My_card&a=merchant_personal">
          <image src="https://hf.pigcms.com/static/wxapp/hyk4.png"></image>
          <view>个人资料</view> 
        </view>
        <view class="li" @tap="goUrl" data-url="c=My_card&a=merchant_transrecord">
          <image src="https://hf.pigcms.com/static/wxapp/hyk7.png"></image>
          <view>交易记录</view>
        </view>
        <view class="li" @tap="goUrl" data-url="c=My_card&a=merchant_store">
          <image src="https://hf.pigcms.com/static/wxapp/hyk8.png"></image>
          <view>门店及电话</view>  
        </view>
        <view class="li" @tap="goUrl" :data-url="'c=My&a=pay&mer_id=' + mer_id">
          <image src="https://hf.pigcms.com/static/wxapp/hyk9.png"></image>
          <view>快速买单</view>   
        </view>
        <view class="li" @tap="goWeixinCard">
          <image src="https://hf.pigcms.com/static/wxapp/wx_card.png"></image>
          <view>{{ card_info.wx_card_code != '' ? '打开微信卡包' : '同步微信卡券'}}</view>   
        </view>
      </view>
    </view>
  </view>
</view>
</template>

"<script>
import common from '../../utils/common.js'
var app = getApp();

export default {
  data() {
    return {
      showPage: false,
      mer_id: 0,
      now_card: {},
      card_info: {},
      userInfo: {}
    };
  },

  onShareAppMessage: function () {},
  onReachBottom: function () {},
  onPullDownRefresh: function () {},
  onUnload: function () {},
  onHide: function () {},
  onShow: function () {},
  onReady: function () {},
  onLoad: function (options) {
    if (!options.mer_id) {
      options.mer_id = app.merchantOwn.mer_id;
    }

    this.setData({
      mer_id: options.mer_id
    });

    if (!app.globalData.userInfo) {
      var that = this; //调用应用实例的方法获取全局数据

      common.getUserInfo(function (userInfo) {
        if (!userInfo.phone) {
          wx.navigateTo({
            url: "../my/newnumber"
          });
        } else {
          that.setMainContent();
        }
      }, 'setting');
    } else {
      if (!app.globalData.userInfo.phone) {
        wx.navigateTo({
          url: "../my/newnumber"
        });
      } else {
        this.setMainContent();
      }
    }
  },
  components: {},
  props: {},
  methods: {
    goUrl: function (e) {
      common.parseUrl(e.currentTarget.dataset.url, 'all');
    },
    setMainContent: function () {
      common.post('Wxapp_merchant&a=merchant_card', {
        mer_id: this.mer_id
      }, "setCardContent", this);
    },
    setCardContent: function (result) {
      console.log(result);

      if (result.card_info.wx_card_code != '') {
        result.card_info.show_card_code = result.card_info.wx_card_code.replace(/(.{4})/g, "$1 ");
      } else {
        result.card_info.show_card_code = result.card_info.id.replace(/(.{4})/g, "$1 ");
      }

      this.setData({
        userInfo: app.globalData.userInfo,
        showPage: true,
        now_card: result.now_card,
        card_info: result.card_info
      });
      wx.hideToast();
    },
    seeCardQrcode: function () {
      wx.navigateTo({
        url: "card_code?mer_id=" + this.mer_id
      });
    },
    goWeixinCard: function () {
      var card_info = this.card_info;

      if (card_info.wx_card_code == '') {
        var cardList = [{
          cardId: card_info.wx_cardid,
          cardExt: '{"code": "", "openid": "", "timestamp":"' + card_info.wx_ticket_addtime + '","signature":"' + card_info.cardsign + '"}'
        }];
        var that = this;
        wx.addCard({
          cardList: cardList,
          success: function (res) {
            wx.redirectTo({
              url: 'card?mer_id=' + that.mer_id
            });
          },
          fail: function (res) {
            console.log(res);
          }
        });
      } else {
        wx.openCard({
          cardList: [{
            cardId: card_info.wx_cardid,
            code: card_info.wx_card_code
          }]
        });
      }
    },
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
.Membership {
    background: #fff;
    margin-bottom:16rpx;
}
.Mcard {
    padding: 40rpx 40rpx 20rpx 40rpx;
}
.Mcard .dl {
    border-radius: 20rpx;
    padding: 5% 30rpx 10% 30rpx;
    background: -webkit-linear-gradient(top, #fe6299 35%,#f3527b 100%);
    color: #fff;
    box-shadow: 0px 10rpx 40rpx 6rpx #d5d5d5;
}
.Mcard .dl .Mcard_top .fl image {
    width: 56rpx;
    height: 56rpx;
    border: #fff 1px solid;
    border-radius: 100%;
    float: left;
    margin-right: 10px;
}
.Mcard .dl .Mcard_top .fr image {
    width: 40rpx;
    height: 40rpx;
    border: #fff 6rpx solid;
}

.Mlist {
    padding: 3% 0;
    display: -webkit-box;
}
.Mlist .li{
    text-align: center;
    flex: 1;
    display: block;
    -webkit-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    width: 33%;
    background: url(https://hf.pigcms.com/static/wxapp/hdt_03.jpg) right center no-repeat;
    background-size: 2rpx 70rpx;
}
.Mlist .li .h2{
    font-size: 28rpx;
    color: #7e8699;
    line-height: 48rpx;
}
.Mlist .li text{
    width: 28rpx;
    height: 28rpx;
    display: inline-block;
    margin-right: 10rpx;
    background-size: 28rpx 28rpx;
    background-repeat: no-repeat;
}
.Mlist .li:nth-child(1) text {
    background-image: url(https://hf.pigcms.com/static/wxapp/hyk1.png);
}
.Mlist .li:nth-child(2) text{
    background-image: url(https://hf.pigcms.com/static/wxapp/hyk2.png);
}
.Mlist .li:nth-child(3) text{
    background-image: url(https://hf.pigcms.com/static/wxapp/hyk3.png);
}
.Mlist .li view{
    color: #666666;
    font-size: 32rpx;
    line-height: 40rpx;
}

.Mcard_end {
    line-height: 24px;
    margin-top: 15%;
}
.Mlist_end .li{
    float: left;
    width: 33.3%;
    text-align: center;
    box-sizing: border-box;
    border-bottom: #ececec 2rpx solid;
    border-right: #ececec 2rpx solid;
    padding:40rpx 0;
}
.Mlist_end .li image {
  width: 48rpx;
  height: 48rpx;
}
.Mlist_end .li view{
  font-size:24rpx;
  line-height: 30px;
  color: #666666;
}
</style>